<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="../../static/css/bootstrap.min.css">
	<link rel="stylesheet" href="../../static/css/ylb.css">
	<link rel="shortcut icon" href="../../static/img/logo.png">
	<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../static/js/popper.min.js"></script>
	<script type="text/javascript" src="../../static/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../../static/js/qrcode.min.js"></script>
	<script type="text/javascript" src="./user.js"></script>
</head>
<body>

<div id="app">
	
	<!-- 左侧 -->
	<div class="left">
		<div class="dhview">

			<!-- LOGO -->
			<a href="../index/" class="index">
			    <div class="logo"></div>
			</a>

			<!-- 导航 -->
			<ul>
			    <a href="../index/" >
			    <li class="nav-li">
			        <i class="icon i-data"></i>
			        <span class="nav-text">数据</span>
			    </li>
			    </a>
			    
			    <a href="../qun/">
			    <li class="nav-li">
			        <i class="icon i-hm"></i>
			        <span class="nav-text">活码</span>
			    </li>
			    </a>
			    
				<a href="../dwz/">
				<li class="nav-li">
				    <i class="icon i-dwz"></i>
				    <span class="nav-text">短网址</span>
				</li>
				</a>
				
				<a href="../tbk/">
				<li class="nav-li">
				    <i class="icon i-tbk"></i>
				    <span class="nav-text">淘宝客</span>
				</li>
				</a>
				
				<a href="../shareCard/">
				<li class="nav-li">
				    <i class="icon i-share"></i>
				    <span class="nav-text">分享卡片</span>
				</li>
				</a>
				
				<a href="../plugin/">
				<li class="nav-li">
				    <i class="icon i-plugin"></i>
				    <span class="nav-text">插件中心</span>
				</li>
				</a>
				
				<a href="../kami/">
				<li class="nav-li">
				    <i class="icon i-kami"></i>
				    <span class="nav-text">卡密分发</span>
				</li>
				</a>
				
				<a href="../config/">
				<li class="nav-li">
				    <i class="icon i-config"></i>
				    <span class="nav-text">配置中心</span>
				</li>
				</a>
				
				<a href="../sucai/">
				<li class="nav-li">
				    <i class="icon i-sucai"></i>
				    <span class="nav-text">素材管理</span>
				</li>
				</a>
				
				<a href="../user/" class="selected">
				<li class="nav-li">
				    <i class="icon i-account-dark"></i>
				    <span class="nav-text">账号管理</span>
			    </li>
			    </a>
			</ul>

			<!-- 账号 -->
			<div class="account">加载中...</div>
		    
		</div>
	</div>

	<!-- 右侧 -->
	<div id="right">
	    
		<h3>账号管理</h3>
		<div class="data-card">
		    
			<!-- 按钮区域 -->
			<div class="button-view" id="button-view" style="display:none;">
			    
			    <!--flex布局按钮容器-->
    			<div class="flex-button-view">
    			    
    			    <!--导航-->
    			    <div class="button-daohang">
    			        <button class="default-btn">账号管理</button>
    			        
    			        <button 
        				class="tint-btn" 
        				style="margin-left: 5px;" 
        				data-toggle="modal" 
        				data-target="#usergroupModal" onclick="getUsergroupList()">用户组</button>
    			    </div>
    			    
    			    <!--功能-->
    			    <div class="button-gongneng">
    			        <button 
        				class="tint-btn"
        				data-toggle="modal" 
        				data-target="#CreatUserModal" 
        				style="margin-left: 5px;" 
        				onclick="initialize_createUser();">创建账号</button>
        				
        				<!--查询账号-->
        				<div class="searchDwzForm">
        				    <form id="checkUser" style="width:75%;float:left;">
        				        <input type="text" name="user_name" class="form-control" placeholder="用户账号" />
        				    </form>
        				    <button class="tint-btn checkDwz" onclick="checkUser()">查询</button>
        				</div>
    			    </div>
    			</div>
			</div>

			<!-- 列表区域 -->
			<div class="data-list">
			    
				<table class="table">
				    <thead></thead>
				    <tbody></tbody>
				</table>
			</div><!-- data-list -->
			
			<p class="loading" style="display: none;"></p>
			
			<!-- 分页 -->
			<div class="fenye" style="display: none;"></div>
			
		</div><!-- data-card -->
	</div><!-- right -->

	<!-- 创建账号 -->
    <div class="modal fade" id="CreatUserModal">
        <div class="modal-dialog">
            <div class="modal-content">
                
                    <!-- 头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">创建账号</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div><!-- modal-header -->
                    
                    <!-- 表单 -->
                    <div class="modal-body">
                        
                        <form id="createUser">
                        <div style="width:100%;height:70px;margin:-5px auto 20px;display:flex;">
                            <div style="flex:1;margin-right:7px;">
                                <span class="text">账号<span style="float:right;" id="user_name_count_style"><span id="user_name_count">0</span>/15</span></span>
                                <input type="text" name="user_name" class="form-control" title="5-15个字符" id="user_name" autocomplete="off" placeholder="设置账号">
                            </div>
                            <div style="flex:1;">
                                <span class="text">密码<span style="float:right;" id="user_pass_count_style"><span id="user_pass_count">0</span>/32</span></span>
                                <input type="text" name="user_pass" class="form-control" title="5-32个字符" id="user_pass" autocomplete="off" placeholder="设置密码">
                            </div>
                        </div>
                        
                        <span class="text">邮箱</span>
                        <input type="email" name="user_email" class="form-control" title="找回密码的重要证明" id="user_email" autocomplete="off" placeholder="输入邮箱">
                        
                        <div style="width:100%;height:70px;margin:-5px auto 20px;display:flex;">
                            <div style="flex:1;margin-right:7px;">
                                <span class="text">密保问题</span>
                                <select name="user_mb_ask" class="form-control" title="找回密码的重要证明" id="user_mb_ask">
                                    <option value="">选择密保问题</option>
                                    <option value="你出生的城市？">你出生的城市？</option>
                                    <option value="你母亲的姓名？">你母亲的姓名？</option>
                                    <option value="你高三班主任姓名？">你高三班主任姓名？</option>
                                    <option value="你父亲的生日？">你父亲的生日？</option>
                                    <option value="你的手机号码？">你的手机号码？</option>
                                    <option value="身份证后8位？">身份证后8位？</option>
                                    <option value="你毕业的大学全称？">你毕业的大学全称？</option>
                                </select>
                            </div>
                            <div style="flex:1;">
                                <span class="text">密保问题答案</span>
                                <input type="text" name="user_mb_answer" class="form-control" title="找回密码的重要证明" id="user_mb_answer" autocomplete="off" placeholder="输入密保问题答案">
                            </div>
                        </div>

                        <span class="text">备注</span>
                        <input type="text" name="user_beizhu" class="form-control" title="可以不填写，备注便于区别账号的用途" id="user_beizhu" autocomplete="off" placeholder="给账号设置一个备注">
                        
                        <span class="text">用户组</span>
                        <select name="user_group" class="form-control"></select>
                        </form>
                    </div><!-- modal-body -->
                    
                    <!-- 底部操作 -->
                    <div class="modal-footer">
                        
                        <div class="footer-btn">
                        <div class="faqnav" title="阅读使用指南">
                            <span class="faq"><a href="../faq.php?faq=user" target="_blank">?</a></span>
                        </div>
                        
                        <div class="btnnav">
                            <button type="button" class="default-btn" onclick="creatUser();">立即创建</button>
                        </div>
                    </div>
                </div><!-- modal-footer -->
                
                <!-- 操作反馈 -->
                <div class="result"></div>
                
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- CreatUserModal -->
    
    <!--用户组-->
    <div class="modal fade" id="usergroupModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">用户组</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="createUsergroup">
                        <span class="text">添加用户组</span>
                        <input type="text" name="usergroup_name" class="form-control" autocomplete="off" placeholder="设置一个用户组名称">
                    </form>
                    
                    <!--已有用户组-->
                    <span class="usergroup-title">已有用户组</span>
                    <div class="usergroup-container"></div>
                </div>
                <div class="modal-footer">
                    <div class="footer-btn">
                        <div class="faqnav" title="阅读使用指南">
                            <span class="faq"><a href="../faq.php?faq=user" target="_blank">?</a></span>
                        </div>
                        <div class="btnnav">
                            <button type="button" class="default-btn" onclick="createUsergroup();">立即添加</button>
                        </div>
                    </div>
                </div>
                <div class="result"></div>
            </div>
        </div>
    </div>
  	
  	<!-- 编辑账号 -->
    <div class="modal fade" id="EditUserModal">
        <div class="modal-dialog">
            
            <div class="modal-content">
                <!-- 头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">编辑账号</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div><!-- modal-header -->
                
                <!-- 表单 -->
                <div class="modal-body">
                <form id="editUser">
                <div style="width:100%;height:70px;margin:-5px auto 20px;display:flex;">
                    <div style="flex:1;margin-right:7px;">
                        <span class="text">账号</span>
                        <input type="text" class="form-control" disabled='disabled' style="cursor:no-drop;" title="账号不可修改" id="user_name_edit">
                    </div>
                    <div style="flex:1;">
                        <span class="text">密码<span style="float:right;" id="user_pass_count_style_edit"><span id="user_pass_count_edit">0</span>/32</span></span>
                        <input type="text" name="user_pass" class="form-control" title="修改密码才填写，否则留空" id="user_pass_edit" autocomplete="off" placeholder="如需修改密码可输入新密码">
                    </div>
                </div>
                
                <span class="text">邮箱</span>
                <input type="email" name="user_email" class="form-control" title="找回密码的重要证明" id="user_email_edit" autocomplete="off" placeholder="输入邮箱">
                
                <div style="width:100%;height:70px;margin:-5px auto 20px;display:flex;">
                    <div style="flex:1;margin-right:7px;">
                        <span class="text">密保问题</span>
                        <select name="user_mb_ask" class="form-control" title="找回密码的重要证明" id="user_mb_ask_edit"></select>
                    </div>
                    <div style="flex:1;">
                        <span class="text">密保问题答案</span>
                        <input type="text" name="user_mb_answer" class="form-control" title="找回密码的重要证明" id="user_mb_answer_edit" autocomplete="off" placeholder="输入密保问题答案">
                    </div>
                </div>
                
                <span class="text">备注</span>
                <input type="text" name="user_beizhu" class="form-control" placeholder="给账号设置一个备注">
                
                <span class="text">用户组</span>
                <select name="user_group" class="form-control"></select>
                
                <!--user_id-->
                <input type="hidden" name="user_id" id="user_id_edit">

                </form>
                </div><!-- modal-body -->
                
                <!-- 底部操作 -->
                <div class="modal-footer">
                    <div class="footer-btn">
                    	<div class="faqnav" title="阅读使用指南">
                    	    <span class="faq"><a href="../faq.php?faq=user" target="_blank">?</a></span>
                    	</div>
                    	<div class="btnnav">
                    	    <button type="button" class="default-btn" onclick="editUser();">提交更新</button>
                    	</div>
                    </div>
                </div><!-- modal-footer -->
                
                <!-- 操作反馈 -->
                <div class="result"></div>
                
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- EditUserModal -->
  	
  	<!-- 确定删除账号 -->
    <div class="modal fade" id="DelUserModal">
        <div class="modal-dialog">
            <div class="modal-content">
                
                <!-- 头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">删除账号</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div><!-- modal-header -->
                
                <!-- 内容 -->
                <div class="modal-body">
                    将会删除该账号及该账号创建的所有活码数据，包括群活码、客服码、渠道码等数据，不可恢复！
                </div><!-- modal-body -->
                
                <!-- 底部操作 -->
                <div class="modal-footer"></div><!-- modal-footer -->
                
                <!-- 操作反馈 -->
                <div class="result"></div>
                
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- DelUserModal -->

    <!-- 全局信息提示框 -->
    <div id="notification">
        <div id="notification-text"></div>
    </div>
    
</div><!-- app -->


<script type="text/javascript">

// 监听账号输入
$('#user_name').on('input propertychange', function(){
    
    // 获取账号
    var user_name = $('#user_name').val();
    
    // 计算个数
    $('#user_name_count').text(user_name.length);
    if(user_name.length < 5 || user_name.length > 15){
        
        // 红色样式
        $('#user_name_count_style').css('color','#f00');
        $('#user_name').css('border-color','#f00');
    }else{
        
        // 默认样式
        $('#user_name_count_style').css('color','#999');
        $('#user_name').css('border-color','#ced4da');
    }
})

// 监听密码输入（创建）
$('#user_pass').on('input propertychange', function(){
    
    // 获取密码
    var user_pass = $('#user_pass').val();
    
    // 计算个数
    $('#user_pass_count').text(user_pass.length);
    if(user_pass.length < 5 || user_pass.length > 32){
        
        // 红色样式
        $('#user_pass_count_style').css('color','#f00');
        $('#user_pass').css('border-color','#f00');
    }else{
        
        // 默认样式
        $('#user_pass_count_style').css('color','#999');
        $('#user_pass').css('border-color','#ced4da');
    }
})

// 监听密码输入（编辑）
$('#user_pass_edit').on('input propertychange', function(){
    
    // 获取密码
    var user_pass = $('#user_pass_edit').val();
    
    // 计算个数
    $('#user_pass_count_edit').text(user_pass.length);
    if(user_pass.length < 5 || user_pass.length > 32){
        
        // 红色样式
        $('#user_pass_count_style_edit').css('color','#f00');
        $('#user_pass_edit').css('border-color','#f00');
    }else{
        
        // 默认样式
        $('#user_pass_count_style_edit').css('color','#999');
        $('#user_pass_edit').css('border-color','#ced4da');
    }
})

</script>

</body>
</html>